import { Canvas } from '@shopify/react-native-skia';
import React from 'react';
import { useWindowDimensions } from 'react-native';
import {
  DIAGRAM_HEIGHT_FOR_ONE_NODE,
  DIAGRAM_HEIGHT_FOR_THREE_NODE,
  DIAGRAM_HORIZONTAL_PADDING,
  HALF_NODE_BACKGROUND_SIZE,
  NODE_BACKGROUND_SIZE,
} from './Constants';
import EnergyNode from './EnergyNode';
import useNamedThemeSkiaSvg from '@/hooks/useNamedThemeSkiaSvg';

type ThreeNodeDiagramProps = {};

const ThreeNodeDiagram: React.FC<ThreeNodeDiagramProps> = (props) => {
  const windowDimension = useWindowDimensions();
  const width = windowDimension.width - 32;
  const pvSource = useNamedThemeSkiaSvg('pv');
  const batterySource = useNamedThemeSkiaSvg('pv');
  const loadSource = useNamedThemeSkiaSvg('pv');

  return (
    <Canvas
      style={{
        width: width,
        height: DIAGRAM_HEIGHT_FOR_THREE_NODE,
      }}
    >
      <EnergyNode
        circleCenter={{
          x: width * 0.5,
          y: HALF_NODE_BACKGROUND_SIZE,
        }}
        textPlacement="right"
        visible
        iconSource={pvSource}
        nodeTitle="测试PV"
        nodeValue="100.3 kWh"
      />
      <EnergyNode
        circleCenter={{
          x: width - HALF_NODE_BACKGROUND_SIZE - DIAGRAM_HORIZONTAL_PADDING,
          y: NODE_BACKGROUND_SIZE + 45 + HALF_NODE_BACKGROUND_SIZE,
        }}
        textPlacement="bottom"
        visible
        iconSource={pvSource}
        nodeTitle="测试PV"
        nodeValue="100.3 kWh"
      />
      <EnergyNode
        circleCenter={{
          x: HALF_NODE_BACKGROUND_SIZE + DIAGRAM_HORIZONTAL_PADDING,
          y: NODE_BACKGROUND_SIZE + 45 + HALF_NODE_BACKGROUND_SIZE,
        }}
        textPlacement="bottom"
        visible
        iconSource={pvSource}
        nodeTitle="测试PV"
        nodeValue="100.3 kWh"
      />
    </Canvas>
  );
};

export default React.memo(ThreeNodeDiagram);
